<template>
    <el-container style="min-height: 100vh">
        <el-container>
            <el-main>
                <div style="margin: 10px 0">
                    <el-input style="width: 200px" placeholder="请输入宿舍类型 " suffix-icon="el-icon-message" v-model="category"
                        class="mll-5"></el-input>
                    <!-- <el-input style="width: 200px" placeholder="请输入宿管编号 " suffix-icon="el-icon-search"
                        v-model="admin_num"></el-input> -->
                    <el-button class="mll-5" type="primary" @click="load">搜索</el-button>
                    <el-button type="warning" @click="reset">重置</el-button>
                </div>
                <div v-if="roles === 'superadmin'" style="margin: 10px 0">
                    <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
                </div>
                <el-table :data="tableData" border v-if="roles === 'student'" stripe :header-cell-class-name="headerBg"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="floor_num" label="楼号" >
                    </el-table-column>
                    <el-table-column prop="layer_amount" label="层数" >
                    </el-table-column>
                    <el-table-column prop="room_amount" label="房间数" >
                    </el-table-column>
                    <el-table-column prop="category" label="类型" >
                    </el-table-column>
                    <el-table-column prop="sex" label="居住性别" >
                    </el-table-column>
                    <el-table-column prop="admin_num" label="宿管编号" >
                    </el-table-column>
                </el-table>
                <el-table :data="tableData" border v-if="roles === 'admin'" stripe :header-cell-class-name="headerBg"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="floor_num" label="楼号" >
                    </el-table-column>
                    <el-table-column prop="layer_amount" label="层数" >
                    </el-table-column>
                    <el-table-column prop="room_amount" label="房间数" >
                    </el-table-column>
                    <el-table-column prop="category" label="类型" >
                    </el-table-column>
                    <el-table-column prop="sex" label="居住性别" >
                    </el-table-column>
                    <el-table-column prop="admin_num" label="宿管编号" >
                    </el-table-column>
                </el-table>
                

                <el-table :data="tableData" border v-if="roles === 'superadmin'" stripe :header-cell-class-name="headerBg"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="floor_num" label="楼号" width="75">
                    </el-table-column>
                    <el-table-column prop="layer_amount" label="层数" width="100">
                    </el-table-column>
                    <el-table-column prop="room_amount" label="房间数" width="100">
                    </el-table-column>
                    <el-table-column prop="category" label="类型" width="100">
                    </el-table-column>
                    <el-table-column prop="sex" label="居住性别" width="100">
                    </el-table-column>
                    <el-table-column prop="admin_num" label="宿管编号" width="100">
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" @click="handleEdit(scope.row)">编辑 <i
                                    class="el-icon-edit"></i></el-button>
                            <el-button type="danger" slot="reference" @click="handleDelete()">删除 <i
                                    class="el-icon-remove-outline"></i></el-button>
                            <el-dialog title="提示" :visible.sync="delVisibleaa" width="300px" center>
                                <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
                              <span slot="footer" class="dialog-footer">
                                    <el-button @click="delVisibleaa = false">取 消</el-button>
                                    <el-button type="primary" @click="del(scope.row.floor_num)">确 定</el-button>
                                </span>
                            </el-dialog>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="padding: 10px 0; text-align: center;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageNum" :page-sizes="[5, 8, 10, 20]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" >
                    </el-pagination>
                </div>
                ​ <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="50%">
                    ​ <el-form label-width="80px" size="small">
                        ​ <el-form-item label="楼号">
                            ​ <el-input v-model="form.floor_num" autocomplete="off"></el-input>
                            ​ </el-form-item>
                        ​ <el-form-item label="层数">
                            ​ <el-input v-model="form.layer_amount" autocomplete="off"></el-input>
                            ​ </el-form-item>
                        ​ <el-form-item label="房间数">
                            ​ <el-input v-model="form.room_amount" autocomplete="off"></el-input>
                            ​ </el-form-item>
                        <el-form-item label="类型" style="margin-bottom: 75px;">
                            <el-select v-model="form.category" placeholder="请选择类型">
                                <el-option label="普通" value="普通"></el-option>
                                <el-option label="豪华" value="豪华"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="居住性别" style="margin-bottom: 75px;">
                            <el-select v-model="form.sex" placeholder="请选择居住性别">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                                <el-option label="混合" value="混合"></el-option>
                            </el-select>
                        </el-form-item>
                        ​ <el-form-item label="宿管编号">
                            ​ <el-input v-model="form.admin_num" autocomplete="off"></el-input>
                            ​ </el-form-item>
                        ​ </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="save">确 定</el-button>
                    </div> ​
                </el-dialog>

            </el-main>
        </el-container>
    </el-container>
</template>
  
<script>
import { mapGetters } from 'vuex'
import service from "@/utils/request";
export default {
    name: 'Floor',
    computed: {
    ...mapGetters(['name', 'user', 'avatar', "roles",'Token']),
    formattedBirth() {
      // 使用 moment.js 将日期格式化为年月日格式
      return moment(this.user.birth).format('YYYY-MM-DD');
    },
    roles() {
      // 假设你从 Vuex 的 getters 中获取 roles
      return this.$store.getters.roles;
    },
    token(){
      return state.user.token
    }
  },
    data() {
        return {

            delarr: [],//存放删除的数据
            multipleSelection: [],//多选的数据
            tableData: [],
            msg: "",//记录每一条的信息，便于取id
            category: "",
            floor_num: "",
            dialogFormVisible: false,
            pageNum: 1,
            pageSize: 5,
            total: 0,
            form: {},
            collapseBtnClass: 'el-icon-s-fold',
            isCollapse: false,
            logoTextShow: true,
            delVisibleaa: false,
            headerBg: 'headerBg',
        }
    },
    created() {
        this.load();
    },
    methods: {
        handleSizeChange(pageSize) {
            console.log(pageSize)
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum)
            this.pageNum = pageNum
            this.load()
        },
        loadDataFromLocalStorage() {
            const storedData = localStorage.getItem('tableData'); // 从本地存储中获取数据
            if (storedData) {
                this.tableData = JSON.parse(storedData); // 将数据解析为对象，并赋值给 tableData
            }
        },
        load() {
            fetch("http://localhost:9090/Floor/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&category=" + this.category).then(res => res.json()).then(res => {
                // + "&faculty" + this.faculty + "&classs"
                console.log(res)
                this.tableData = res.data
                this.total = res.total
                localStorage.setItem('tableData', JSON.stringify(res.data));
            })
        },
        reset() {
            this.category = ""
            // this.name = ""
            this.load()
        },
        handleAdd() {
            this.dialogFormVisible = true
            this.form = {}
        },
        handleEdit(row) {
            this.form = row
            this.dialogFormVisible = true
        },
        save() {
            service.post("http://localhost:9090/Floor", this.form).then(res => {
                if (res) {
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.load()
                } else {
                    this.$message.error("保存失败")
                }
            })
        },

        handleDelete() {
            this.delVisibleaa = true;
        },
        del(floor_num) {
            service.delete("http://localhost:9090/Floor/delete?floor_num=" + floor_num).then(res => {
                if (res) {
                    this.$message.success("删除成功")
                    this.delVisibleaa = false
                    this.load()
                } else {
                    this.$message.error("删除失败")
                }
            })
        },

        handleSelectionChange(val) {
            console.log(val)
            this.multipleSelection = val
        }
    }
}
</script>
  
<style>
.headerBg {
    background: #eee !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mll-5 {
    margin-left: 5px;
}
</style>
  